<template>
  <div class="person-box">
    <Top />
    <div class="head-box" v-if="info">
      <router-link to="/update">
        <van-image
          round
          width="3rem"
          height="3rem"
          :src="info.pic"
        />
      </router-link>
      <p>{{info.name}}</p>
    </div>
    <van-cell title="我的收藏" is-link to="/store" />
    <van-cell title="退出登录" clickable @click='sighout'/>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
import Top from "../components/Top.vue";
import { Toast } from "vant";
import "vant/es/toast/style";
import { useStore } from "../store";
import { computed, onBeforeMount } from "vue-demi";
const router = useRouter()
const store = useStore()
const sighout = ()=>{
  localStorage.removeItem('token')
  store.$reset()
  console.log(store);
  Toast('成功安全退出')
  router.replace('/login')
}
onBeforeMount(()=>{
  let {isLogin,info} = store
  if(isLogin===null){store.changeIsLoginAsync()}
  if(info===null){store.changeInfoAsync()}
})
let info = computed(()=>{
  let {isLogin,info} = store
  console.log(info);
  if(isLogin && info) return info
  return null
})
</script>

<style lang="less" scoped>
.person-box {
  height: 100vh;
  /deep/span {
    font-weight: 500;
  }
}
.head-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  p {
    margin-top: 10px;
  }
}
</style>
